<template>
    <div class="index_about">
        <div class="about-img">
            <img :src="data.imgurl" mode="widthFix" alt="">
        </div>
        <div class="about-content">
            <div class="head">
                <h2 class="title" :style="{color:app_tabBar.config.firstcolor}">
                    {{data.title}}
                </h2>
                <p class="subtitle" :style="{color:app_tabBar.config.secondcolor}">
                    {{data.subtitle}}
                </p>
            </div>
            <div class="editor">
                <wxParse :content="data.content" />
            </div>
            <a @tap="linkMore" class="more" :style="{color:app_tabBar.config.secondcolor,borderColor:app_tabBar.config.secondcolor}">{{data.more_text}}</a>
        </div>
    </div>
</template>
<script>
import wxParse from 'mpvue-wxparse'
import { switchTab } from '@/utils/index'
import { mapGetters } from 'vuex'
export default {
  props: {
    data: Array
  },
  components: {
    wxParse
  },
  computed: {
    ...mapGetters(['app_tabBar'])
  },
  methods: {
    linkMore() {
      switchTab('about', this)
    }
  }
}
</script>
<style lang="scss" scoped>
.index_about {
  .about-img img {
    width: 100%;
    margin-bottom: 20px;
  }
  .about-content {
  }
}
</style>